<script>
import JSMpeg from "@/utils/jsmpeg.min.js";
export default {
  props: {
    url: {
      type: String,
      default: "",
    },
  },
  computed: {
    dataUrl() {
      return this.wsHostPort + "?url=" + btoa(this.url);
    },
  },
  watch: {
    url: {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            setTimeout(() => {
              this.jsMpeg = new JSMpeg.Player(
                this.wsHostPort + "?url=" + btoa(this.url),
                {
                  canvas: this.$refs["videoRef"],
                }
              );
            }, 0);
          });
        } else {
          this.logout();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      wsHostPort: window.config.wsHostPort,
    };
  },
  beforeDestroy() {
    this.logout();
  },
  methods: {
    logout() {
      if (this.jsMpeg) {
        this?.jsMpeg?.stop && this.jsMpeg.stop();
        this?.jsMpeg?.destroy && this.jsMpeg.destroy();
      }
    },
  },
};
</script>

<template>
  <!-- <canvas class="jsmpeg video-box" ref="videoRef" :data-url="dataUrl">
  </canvas> -->
  <video class="video-box" controls>
    <source src="/video/A01.mp4" type="video/mp4" />
  </video>
</template>

<style lang="scss" scoped>
.video-box {
  aspect-ratio: 16 / 9;
  width: 100%; /* 使视频宽度占满容器 */
  height: auto; /* 保持视频的原始宽高比 */
  /* 如果你想要一个固定的宽高比，可以使用 padding-top 技巧 */
  /* aspect-ratio: 16 / 9; CSS 的 aspect-ratio 属性在较新的浏览器中可用，但可能不是所有浏览器都支持 */
  /* 或者使用以下替代方法 */
  /* padding-top: 56.25%; // 16:9 的宽高比，通过百分比 padding 实现 */
  /* position: relative; */
  /* display: block; */
  /* 然后你可以添加一个绝对定位的伪元素或子元素来覆盖整个视频区域，如果需要的话 */
}
</style>
